<template>
    <div class="product-detail-container">
        <div class="content-wrapper" v-if="commodity">
            <div class="breadcrumb-section">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <router-link to="/shopping">商城</router-link>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        {{ commodity.classification1_name }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-if="commodity.classification2_name">
                        {{ commodity.classification2_name }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>商品详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            
            <div class="product-main">
                <div class="product-images">
                    <enlarge-images v-if="commodity.commodityimg_set && commodity.commodityimg_set.length > 0" :images="commodity.commodityimg_set" />
                    <div v-else class="no-image-placeholder">
                        <el-icon :size="80" color="#ccc">
                            <Picture />
                        </el-icon>
                        <p>暂无商品图片</p>
                    </div>
                </div>
                
                <div class="product-info">
                    <div class="product-header">
                        <h1 class="product-name">{{ commodity.name }}</h1>
                        <h2 class="product-caption">{{ commodity.caption }}</h2>
                    </div>
                    
                    <div class="product-details">
                        <div class="detail-item">
                            <span class="label">品牌：</span>
                            <span class="value">{{ commodity.brand || '其他品牌' }}</span>
                        </div>
                        
                        <div class="detail-item price-section">
                            <span class="label">价格：</span>
                            <span class="price">￥{{ commodity.price }}</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="label">库存：</span>
                            <span class="value stock">{{ commodity.stock }} 件</span>
                        </div>
                        
                        <div class="detail-item">
                            <span class="label">评价：</span>
                            <span class="value">{{ commodity.comments || 0 }} 条评价</span>
                        </div>
                    </div>
                    
                    <div class="quantity-section">
                        <span class="label">数量：</span>
                        <el-input-number 
                            v-model="form.number" 
                            :min="1" 
                            :max="commodity.stock" 
                            controls-position="right"
                            size="large"
                            class="quantity-input"
                        />
                    </div>
                    
                    <div class="action-buttons">
                        <el-button 
                            type="primary" 
                            size="large" 
                            @click="addcar"
                            :loading="isAddingToCart"
                            class="add-to-cart-btn"
                        >
                            <i class="el-icon-shopping-cart-2"></i>
                            加入购物车
                        </el-button>
                        <el-button 
                            type="warning" 
                            size="large"
                            class="buy-now-btn"
                        >
                            <i class="el-icon-money"></i>
                            立即购买
                        </el-button>
                    </div>
                </div>
            </div>
            
            <div class="product-tabs">
                <el-tabs v-model="activeName" class="detail-tabs">
                    <el-tab-pane label="规格与包装" name="first">
                        <div class="tab-content">
                            <h3>包装清单</h3>
                            <p>{{ commodity.pack || '暂无包装信息' }}</p>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="售后保障" name="second">
                        <div class="tab-content" v-html="commodity.serviceafter_sale || '暂无售后信息'"></div>
                    </el-tab-pane>
                    <el-tab-pane :label="`商品评价(${commodity.comments || 0})`" name="third">
                        <div class="tab-content">
                            <el-empty description="暂无评价" v-if="!commodity.comments" />
                            <div v-else class="reviews-section">
                                <p>评价功能正在开发中...</p>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        
        <div class="loading-container" v-else>
            <el-skeleton :rows="5" animated />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getCommodityDetail, createCart } from '@/api/shopping'
import { useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'

const route = useRoute()
const commodity = ref(null)
const activeName = ref('first')
const isAddingToCart = ref(false)

const form = ref({
    number: 1,
    commodity: route.params.id
})

// 获取商品详情
const fetchCommodityDetail = async () => {
    try {
        const data = await getCommodityDetail(route.params.id)
        commodity.value = data
        form.value.commodity = route.params.id
    } catch (error) {
        console.log('获取商品详情失败', error.message)
        ElMessage.error('获取商品详情失败')
    }
}

// 加入购物车
const addcar = async () => {
    if (!commodity.value) return
    
    if (form.value.number > commodity.value.stock) {
        ElMessage.warning('库存不足')
        return
    }
    
    isAddingToCart.value = true
    try {
        await createCart(form.value)
        ElMessage.success('添加到购物车成功')
    } catch (error) {
        console.log('添加失败', error.message)
        ElMessage.error('添加到购物车失败')
    } finally {
        isAddingToCart.value = false
    }
}

// 监听路由变化，重新获取商品详情
watch(() => route.params.id, (newId) => {
    if (newId) {
        fetchCommodityDetail()
    }
})

// 组件挂载时获取商品详情
onMounted(() => {
    fetchCommodityDetail()
})
</script>

<style lang="less" scoped>
.product-detail-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb-section {
    margin-bottom: 20px;
    
    :deep(.el-breadcrumb) {
        .el-breadcrumb__item {
            .el-breadcrumb__inner {
                color: rgba(255, 255, 255, 0.8);
                
                &:hover {
                    color: white;
                }
            }
        }
    }
}

.product-main {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .product-images {
        flex: 1;
        min-width: 400px;
        
        .no-image-placeholder {
            width: 480px;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f8f8f8;
            border: 2px dashed #ddd;
            border-radius: 8px;
            color: #999;
            
            p {
                margin-top: 16px;
                font-size: 16px;
            }
        }
    }
    
    .product-info {
        flex: 1;
        
        .product-header {
            margin-bottom: 30px;
            
            .product-name {
                font-size: 28px;
                font-weight: 700;
                color: #333;
                margin-bottom: 10px;
                line-height: 1.3;
            }
            
            .product-caption {
                font-size: 18px;
                color: #666;
                font-weight: 400;
                margin: 0;
            }
        }
        
        .product-details {
            margin-bottom: 30px;
            
            .detail-item {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                
                .label {
                    color: #666;
                    font-weight: 500;
                    min-width: 80px;
                }
                
                .value {
                    color: #333;
                    font-weight: 600;
                }
                
                &.price-section {
                    .price {
                        color: #ff4757;
                        font-size: 32px;
                        font-weight: 700;
                    }
                }
                
                .stock {
                    color: #2ed573;
                }
            }
        }
        
        .quantity-section {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            
            .label {
                color: #666;
                font-weight: 500;
                margin-right: 15px;
            }
            
            .quantity-input {
                width: 150px;
            }
        }
        
        .action-buttons {
            display: flex;
            gap: 15px;
            
            .el-button {
                flex: 1;
                padding: 15px 30px;
                font-size: 16px;
                border-radius: 25px;
                transition: all 0.3s ease;
                
                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
                }
            }
            
            .add-to-cart-btn {
                background: linear-gradient(45deg, #667eea, #764ba2);
                border: none;
            }
            
            .buy-now-btn {
                background: linear-gradient(45deg, #ff9a9e, #fecfef);
                border: none;
                color: #333;
            }
        }
    }
}

.product-tabs {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    .detail-tabs {
        :deep(.el-tabs__header) {
            margin-bottom: 20px;
        }
        
        :deep(.el-tabs__nav-wrap::after) {
            background: rgba(102, 126, 234, 0.2);
        }
        
        :deep(.el-tabs__active-bar) {
            background: #667eea;
        }
        
        :deep(.el-tabs__item) {
            font-size: 16px;
            font-weight: 500;
            
            &.is-active {
                color: #667eea;
            }
        }
    }
    
    .tab-content {
        padding: 20px 0;
        
        h3 {
            color: #333;
            margin-bottom: 15px;
        }
        
        p {
            color: #666;
            line-height: 1.6;
            font-size: 15px;
        }
    }
}

.loading-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

// 响应式设计
@media (max-width: 768px) {
    .product-detail-container {
        padding: 10px;
    }
    
    .product-main {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        
        .product-images {
            min-width: auto;
        }
        
        .product-info {
            .product-header .product-name {
                font-size: 22px;
            }
            
            .action-buttons {
                flex-direction: column;
                
                .el-button {
                    padding: 12px 20px;
                }
            }
        }
    }
    
    .product-tabs {
        padding: 20px;
    }
}
</style> 